import React from 'react';
import { BarChart3, Users, Wifi, WifiOff, AlertCircle, Server } from 'lucide-react';
import { useApp } from '../contexts/AppContext';

export function DashboardPage() {
  const { state } = useApp();

  const stats = {
    totalAccounts: state.accounts.length,
    onlineAccounts: state.accounts.filter(a => a.status === 'online').length,
    offlineAccounts: state.accounts.filter(a => a.status === 'offline').length,
    errorAccounts: state.accounts.filter(a => a.status === 'error').length,
    totalTabs: state.tabs.length,
    activeTabs: state.tabs.filter(t => t.isActive).length,
    totalPlatforms: state.platforms.length
  };

  const platformDistribution = state.platforms.reduce((acc, platform) => {
    const count = state.accounts.filter(a => a.platform === platform).length;
    if (count > 0) {
      acc.push({ platform, count, percentage: (count / stats.totalAccounts) * 100 });
    }
    return acc;
  }, [] as { platform: string; count: number; percentage: number }[]);

  return (
    <div className="p-6">
      <div className="flex items-center space-x-2 mb-6">
        <BarChart3 className="text-purple-500" size={24} />
        <h1 className="text-2xl font-semibold text-gray-800">数据统计</h1>
      </div>

      {/* 概览卡片 */}
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
        <div className="bg-white rounded-lg shadow-sm border p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">总账号数</p>
              <p className="text-2xl font-bold text-gray-800">{stats.totalAccounts}</p>
            </div>
            <Users className="text-blue-500" size={32} />
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-sm border p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">在线账号</p>
              <p className="text-2xl font-bold text-green-600">{stats.onlineAccounts}</p>
            </div>
            <Wifi className="text-green-500" size={32} />
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-sm border p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">异常账号</p>
              <p className="text-2xl font-bold text-red-600">{stats.errorAccounts}</p>
            </div>
            <AlertCircle className="text-red-500" size={32} />
          </div>
        </div>

        <div className="bg-white rounded-lg shadow-sm border p-6">
          <div className="flex items-center justify-between">
            <div>
              <p className="text-sm font-medium text-gray-600">平台数量</p>
              <p className="text-2xl font-bold text-purple-600">{stats.totalPlatforms}</p>
            </div>
            <Server className="text-purple-500" size={32} />
          </div>
        </div>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 平台分布 */}
        <div className="bg-white rounded-lg shadow-sm border p-6">
          <h2 className="text-lg font-medium text-gray-800 mb-4">平台分布</h2>
          <div className="space-y-3">
            {platformDistribution.map((item, index) => (
              <div key={item.platform} className="flex items-center justify-between">
                <span className="text-sm font-medium text-gray-700">{item.platform}</span>
                <div className="flex items-center space-x-2">
                  <div className="w-24 bg-gray-200 rounded-full h-2">
                    <div 
                      className="bg-blue-500 h-2 rounded-full" 
                      style={{ width: `${Math.min(item.percentage, 100)}%` }}
                    />
                  </div>
                  <span className="text-sm text-gray-600 w-12">{item.count}</span>
                </div>
              </div>
            ))}
          </div>
        </div>

        {/* 状态统计 */}
        <div className="bg-white rounded-lg shadow-sm border p-6">
          <h2 className="text-lg font-medium text-gray-800 mb-4">状态统计</h2>
          <div className="space-y-4">
            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <Wifi className="text-green-500" size={16} />
                <span className="text-sm">在线</span>
              </div>
              <div className="text-sm font-medium text-gray-800">
                {stats.onlineAccounts} ({stats.totalAccounts > 0 ? Math.round((stats.onlineAccounts / stats.totalAccounts) * 100) : 0}%)
              </div>
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <WifiOff className="text-gray-400" size={16} />
                <span className="text-sm">离线</span>
              </div>
              <div className="text-sm font-medium text-gray-800">
                {stats.offlineAccounts} ({stats.totalAccounts > 0 ? Math.round((stats.offlineAccounts / stats.totalAccounts) * 100) : 0}%)
              </div>
            </div>

            <div className="flex items-center justify-between">
              <div className="flex items-center space-x-2">
                <AlertCircle className="text-red-500" size={16} />
                <span className="text-sm">异常</span>
              </div>
              <div className="text-sm font-medium text-gray-800">
                {stats.errorAccounts} ({stats.totalAccounts > 0 ? Math.round((stats.errorAccounts / stats.totalAccounts) * 100) : 0}%)
              </div>
            </div>

            <div className="pt-4 border-t">
              <div className="flex items-center justify-between">
                <span className="text-sm font-medium text-gray-700">标签页</span>
                <span className="text-sm font-medium text-gray-800">
                  {stats.activeTabs} / {stats.totalTabs} 活跃
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}